<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kitten TTS - 文字转声音</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <header>
            <h1>Kitten TTS - 文字转声音</h1>
            <p>使用轻量级的Kitten TTS模型将文本转换为高质量语音</p>
        </header>
        
        <main>
            <section class="tts-form">
                <div class="form-group">
                    <label for="text-input">输入文本：</label>
                    <textarea id="text-input" rows="5" placeholder="请输入要转换的文本..."></textarea>
                </div>
                
                <div class="form-group">
                    <label for="voice-select">选择语音：</label>
                    <select id="voice-select">
                        {% for voice in voices %}
                            <option value="{{ voice }}">{{ voice }}</option>
                        {% endfor %}
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="language-select">选择语言：</label>
                    <select id="language-select">
                        {% for lang in languages %}
                            <option value="{{ lang }}">{{ '中文' if lang == 'zh' else 'English' }}</option>
                        {% endfor %}
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="speed-input">语速：</label>
                    <input type="range" id="speed-input" min="0.5" max="2.0" step="0.1" value="1.0">
                    <span id="speed-value">1.0</span>
                </div>
                
                <div class="form-actions">
                    <button id="convert-btn" class="btn btn-primary">转换</button>
                    <button id="clear-btn" class="btn btn-secondary">清空</button>
                </div>
            </section>
            
            <section class="result" id="result-section">
                <h2>转换结果</h2>
                <div id="loading" style="display: none;">
                    <div class="spinner"></div>
                    <p>正在处理...</p>
                </div>
                <div id="error-message" class="error" style="display: none;"></div>
                <div id="success-message" class="success" style="display: none;">
                    <p>音频生成成功！点击下方播放或下载</p>
                    <div class="audio-controls">
                        <audio id="audio-player" controls></audio>
                        <a id="download-link" class="btn btn-download" href="#" download>下载音频</a>
                    </div>
                </div>
            </section>
            
            <section class="history">
                <h2>转换历史</h2>
                <div class="history-controls">
                    <button id="refresh-history" class="btn btn-secondary">刷新</button>
                </div>
                <div id="history-list" class="history-list">
                    <!-- 历史记录将通过JavaScript动态加载 -->
                </div>
            </section>
        </main>
        
        <footer>
            <p>&copy; 2023 Kitten TTS Web</p>
        </footer>
    </div>
    
    <script src="/static/js/app.js"></script>
</body>
</html>